<template>
  <div class="app-container towSearchHeader">
    <div class="customContainer">
      <div class="customHeader">
        <div class="bottom_box_total">
          <div style="margin-bottom:10px">摊位机出库明细表</div>
          <span style="margin-left:6px;"> 门店：{{store_name}} </span>
          <span style="padding-left:15px">时间： {{lasttime}} </span>
        </div>
      </div>
      <!-- 列表 -->
      <dj-simple-table :columns="tableColumns" :data="list" :loading="listLoading" />
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <span class="pull-right mt10" style="font-size:14px;color:#606266">　出货数量合计：{{returnNum}}&#x3000;&#x3000;&#x3000;　　
        <span style="padding-left:20px">
          出货金额合计：{{returnMoney|keepTwoNum}}
        </span>
        &#x3000;&#x3000;</span>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/report/booth_out_detail';
import { DjSimpleTable } from '@/components/table';
export default {
  components: {
    'dj-simple-table': DjSimpleTable
  },
  data() {
    return {
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        }, 
        {
          label: '机台号',
          dtcol: 'machine_id'
        },
        {
          label: '机台类型',
          dtcol: 'machine_type'
        },
        {
          label: '礼品名称',
          dtcol: 'gift_name'
        },
        {
          label: '神采编号',
          dtcol: 'no_obsolete'
        },
        {
          label: '礼品编号',
          dtcol: 'gift_id'
        },
        {
          label: '出货时间',
          dtcol: 'create_time'
        },
        {
          label: '会员卡号',
          dtcol: 'vip_id'
        }, 
        {
          label: '出货数（个）',
          dtcol: 'out_num'
        },
        {
          label: '成本价（元）',
          dtcol: 'money_cost',
          isnum: true
        },
        {
          label: '出货金额（元）',
          dtcol: 'out_money',
          isnum: true
        }
      ],
      list: [],
      listLoading: false,
      store_name: '',
      lasttime: '',
      formInline: {
        store_id: '',
        begin_time: '',
        end_time: ''
      },
      returnNum: 0,
      returnMoney: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  }, 
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        let row = this.$route.query.row;
        let global = this.$route.query.global;
        this.formInline.store_id = global.store_id;
        this.formInline.begin_time = row.time;
        this.formInline.end_time = row.time;
        this.store_name = global.storeName
        this.lasttime =  row.time; 
        this.fetchData();
      } else {
        if (!this.list || this.list.length == 0) {
          this.fetchData();
        }
      }
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.returnNum = 0;
      this.returnMoney = 0;
      getList(this.formInline)
        .then(response => {
          this.list = response.data;
          let list = this.list; 
          if (list.length > 0) {
            for (let key in list) {
              list[key].index = parseInt(key) + 1;
              this.returnNum += parseInt(list[key].out_num);
              this.returnMoney += parseFloat(list[key].out_money);
            }
          }
          this.list = list;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.bottom_box_total {
  font-size: 14px;
  color: #606266;
}
</style>